金魚都能懂的網頁切版：12、13

切出漂亮表格

在製作商務網站後台的管理頁面，常常會運用到表單來做管理，因此想要切出好看的表格，可以趕緊來練習這單元。
https://codepen.io/mikeyam/pen/mdEbBqB?editors=1100

在製作表格時，可以先了解表格架構 從最外層往內可以看出是這樣順序
table > thead / tbody/ tfoot > tr > th/ td
其中thead這層都是以thead > tr> th 來寫第一層
其中colspan="5"是指跨五格

<thead>
    <tr>
        <th scope="col">基礎版面</th>
        <th scope="col">破格式版面</th>
        <th scope="col">滿版</th>
        <th scope="col">選單</th>
        <th scope="col">表單</th>
        <th scope="col">表格</th>
    </tr>
</thead>

外層：把表格水平置中

html, body{
    height: 100%;
}
body{
    display: flex;
    align-items: center;
    background: linear-gradient(45deg, #3d5894,#08c7a5);
}

運用:first-child和:last-child做出表格圓角
運用:nth-child(even)製作出表格內部色彩

.table thead th:first-child{
    border-radius: 10px 0 0 0;
}
.table thead th:last-child{
    border-radius: 0 10px 0 0;
}
.table tbody tr:nth-child(even){
    background: #ffa;
}
.table tbody tr:hover{
    background-color: #FEE;
}
.table tbody a{
    color: #888;
    text-decoration: none;
}
.table tfoot td:first-child{
    border-radius: 0 0 0 10px;
}
.table tfoot td:last-child{
    border-radius: 0 0 10px 0;
}

這裏把表格標題 caption部分使用 caption-side: bottom; 移至下方

.table caption{
    caption-side: bottom;
    text-align: right;
    padding: 10px 0;
    color: #ccc;
}

萬用的側邊選單

https://codepen.io/mikeyam/pen/BazBmLb?editors=1010

html可分為 form 和 nav 兩大區塊

<div class="side-menu">
    <form>
        <input type="search" placeholder="請輸入關鍵字">
        <button><i class="fas fa-search"></i></button>
    </form>
    <nav>
        <a href="#"><i class="tou fab fa-affiliatetheme"></i>鐵人賽</a>
        <a href="#"><i class="tou fab fa-alipay"></i>暴力班</a>
        <a href="#"><i class="tou fas fa-ambulance"></i>RWD醬子</a>
        <a href="#"><i class="tou fas fa-american-sign-language-interpreting"></i>金魚網頁</a>
        <a href="#"><i class="tou fab fa-angellist"></i>金魚切版</a>
    </nav>
</div>

外層

html, body{
    height: 100%;
}
body{
    background-color: #546377;
}

form區塊：
hsla(240, 50%, 20%, .6) 解釋：HSLA 就跟 RGBA 一樣，都是在原本的屬性中多加入了不透明度的設定
參考 https://abgne.tw/css/css3-lab/css3-hsl-hsla-color.html
運用::placeholder可以改變input裡 placeholder 的字體顏色

.side-menu{
    width: 300px;
    height: 100%;
    padding: 50px 0;
    box-sizing: border-box;
    background: linear-gradient(45deg, #3381b0,#c2196c);
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0px 10px hsla(240, 50%, 20%, .6);
}
.side-menu form{
    display: flex;
    margin: 0 10px 50px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, .4);
}
.side-menu input, .side-menu button{
    border: none;
    padding: 5px 10px;
    background-color: transparent;
    color: #fff;
}
.side-menu input:focus, .side-menu button:focus{
    outline: none;
}
.side-menu input::placeholder{
    color: #fff;
}
.side-menu input{
    width: 230px;
}
.side-menu button{
    width: 50px;
}

nav區塊：
外層利用side-menu的flex-direction: column;改變主軸，再利用display: block;做出佔滿整個區塊的空間
nav a + a::before偽元素製作出好看的線條
利用transform: scale(0);方法可以使標誌移進移出

nav a{
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    position: relative;
}
/* 若設定一般的border會把整塊貼滿，不好看 */
nav a + a::before{
    content: '';
    position: absolute;
    top: 0;
    right: 10px;
    left: 10px;
    border-top: 1px solid rgba(255, 255, 255, .4) ;
}
nav a .tou{
    margin-right: -1.1em;
    transform: scale(0);
    transition: .3s;
}
nav a:hover .tou{
    margin-right: 0em;
    transform: scale(1);
}